<template>
  <div class="category_page footer-page">
    <div class="top_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.main_title" :name="item.id + ''" />
      </el-tabs>
      <el-link v-if="tabList.length > 0 && $hasMethod('#add')" href="/webConfig/show" :underline="false" type="primary">添加板块</el-link>
    </div>
    <div class="flex tab_content">
      <div class="img_wrapper">
        <el-image :src="require('../../../assets/images/demo_activity.jpg')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div v-if="!$hasMethod('#edit')" class="mask" />
        <h5>{{ configTitle }}</h5>
        <div class="main">
          <template v-for="(item, index) in dataList">
            <goods-link :key="index" :goods-data="item" :show-tool="$hasMethod('#edit')" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
          </template>
          <div v-if="dataList.length < 5 && $hasMethod('#edit')" class="add-div" @click="openSelect">
            <i class="el-icon-plus" />添加商品({{ dataList.length }}/5)
          </div>
        </div>
      </div>
    </div>
    <div v-if="$hasMethod('#edit')" class="page-footer-btns">
      <el-button size="small" @click="reset">重置</el-button>
      <el-button size="small" type="primary" @click="submit">保存</el-button>
    </div>
    <goods-dialog ref="goodsDialog" :multiple="true" :max-num="5" :show-checked-tool="true" @setSelect="setSelect" />
  </div>
</template>

<script>
import { getActivity, getActivityGoods, addActivityGoods } from '@/api/recommend'
import goodsLink from '../compoments/goodsLink'
import goodsDialog from '@/components/goodsDialog.vue'
export default {
  components: { goodsLink, goodsDialog },
  data() {
    return {
      activeName: '',
      tabList: [],
      dataList: []
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id === this.activeName)
      return tab ? tab.main_title : '活动板块配置'
    }
  },
  mounted() {
    this.getTabs()
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      const item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index - 1])
      this.$set(this.dataList, index - 1, item)
    },
    // 降序
    downSort(index) {
      if (index === this.dataList.length - 1) {
        return
      }
      const item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index + 1])
      this.$set(this.dataList, index + 1, item)
    },
    // 删除商品
    deleteGoods(index) {
      this.dataList.splice(index, 1)
    },
    // 设置选中
    setSelect(goodsList) {
      this.dataList = goodsList
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = [...this.dataList]
    },
    submit() {
      // 保存
      const list = this.dataList.map(obj => obj.goods_id)
      addActivityGoods({
        module_id: this.activeName,
        goodsidStr: list.join(',')
      }).then(res => {
        this.getData()
      })
    },
    reset() {
      // 重置
      this.getData()
    },
    handleClick(tab) {
      this.getData()
    },
    // 获取商品列表
    getData() {
      getActivityGoods(this.activeName).then(res => {
        this.dataList = res
      })
    },
    getTabs() {
      getActivity().then(res => {
        this.tabList = res
        this.activeName = this.tabList[0].id + ''
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
